<template>
	<view class="home" :style="bgStyle">
		<!-- 基本用法 -->
		<!-- <custom-navbar title="商品列表" :show-back="true" @back="handleBack" /> -->

		<!-- 带搜索框的用法 -->
		<!-- <custom-navbar :title="t('home.title')" :transparent="true" :scrollThreshold="80" @scroll="handleNavbarScroll"
			:show-search="true" v-model:search-value="searchKey" @search="doSearch" /> -->
		<custom-navbar :title="t('home.title')" :scrolled="isScrolled" :transparent="true" :show-search="true"
			v-model:search-value="searchKey" @search="doSearch" />

		<!-- 完全自定义右侧 -->
		<!-- 	<custom-navbar title="个人中心" :show-more="false">
			<template #right>
				<u-icon name="edit-pen" @click="editProfile"></u-icon>
			</template>
		</custom-navbar> -->
		<view class="content pb150" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="smart-cn p30">
				<view class="hi-smart">
					<image class="img" src="/static/images/home/1000002702.png"></image>
					<div class="right">
						<view class="hi-smart-left">
							<view class="top">{{ $t('home.hi') }}</view>
							<view class="bottom">{{ $t('home.smart') }}</view>
						</view>
						<view @click="handleService" class="hi-smart-right">
							<image class="arrows" src="/static/images/home/箭头.svg"></image>
						</view>
					</div>
				</view>
				<!-- 	<view class="languageSwitch">
					<up-select v-model:current="showSelect" label="CN" :options="langList"
						@select="changeLanguage"></up-select>

				</view> -->
			</view>
			<!-- 圆形图片容器 -->
			<view class="Parkdisplay-container" @click="handleCircleClick">
				<!-- 中心区域 -->
				<view class="center-area" @click.stop="goToCenter"></view>

				<!-- 扇叶区域 -->
				<view v-for="(sector, index) in sectors" :key="index" class="sector" :style="getSectorStyle(index)"
					@click.stop="goToSector(index)"></view>

				<!-- 背景图片 -->
				<image class="Parkdisplay-image" :src="cdn('园区展示.svg')" mode="aspectFill"></image>
			</view>
			<!-- 	<image class="Parkdisplay" src="https://gx.jifgou.com/image/园区展示.svg"></image>
			<image mode="aspectFit" @click="handleImageClick" class="Parkdisplay" :src="cdn('园区展示.svg')"></image> -->

			<view class="p0030 w100 mb20">
				<view class="Industry p1630 fcsb" @click="navigateToCurrentPolicy">
					<view class="fc scroll-container">
						<image class="img" src="/static/images/home/产业资讯.svg"></image>
						<view class="division"></view>
						<view class="scroll-content" style="margin-left: 120rpx;">
							<!-- 循环渲染政策数据 -->
							<view class="f26c3 scroll-item" v-for="(item, index) in homeData.policyData" :key="index"
								:style="{ transform: `translateY(-${currentIndex * 100}%)` }">
								{{ item.policy_title }}
							</view>
						</view>
					</view>
					<image class="arrows" src="/static/images/home/Vector.svg"></image>
				</view>
			</view>
			<!-- 	<view class="container">
				<button v-if="!userInfo" :loading="isLoading" type="primary" open-type="getUserInfo"
					@click="handleWechatLogin">
					微信登录
				</button>

				<view v-else class="user-info">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill" />
					<text>{{ userInfo.nickname }}</text>
				</view>
			</view> -->
			<view class="p0030 w100 mb60">
				<view class="entrance fcsb">
					<view @click="navigateTolive" class="item">
						<view class="f24bc0 mb15">企业展示</view>
						<view class="fsb">
							<view class="f20c9">去看看</view>
							<image class="live" src="/static/images/home/企业直播.jpg"></image>
						</view>
					</view>
					<view @click="navigateTogarden" class="item">
						<view class="f24bc0 mb15">园区引导</view>
						<view class="fsb">
							<view class="f20c9">去看看</view>
							<image class="Park" src="/static/images/home/园区引导.jpg"></image>
						</view>
					</view>
					<view @click="open" class="item">
						<view class="f24bc0 mb15">服务入口</view>
						<view class="fsb">
							<view class="f20c9">去看看</view>
							<image class="Service" src="/static/images/home/服务入口.jpg"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="p0030 w100  mb60">
				<view class="Preferential">
					<view class="fcsb mb48">
						<view class="tilte fcc">
							<view class="f36bc0">惠企政策</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view class="fc" @click="navigateToPolicyNotice">
							<view class="f24c6">更多</view>
							<image class="Frame ml5" src="/static/images/home/Frame(2).svg"></image>
						</view>
					</view>
					<view class="fcsb mb20">
						<view class="Industry" @click="navigateToIndustry">
							<image class="zixun" :src="cdn('资讯.svg')"></image>
							<view class="f30cf">产业资讯</view>
							<view class="f20cf" style="opacity: 0.5;">最新资讯与行业分析</view>
						</view>
						<view>
							<view @click="navigateToPolicyNotice" class="inform mb20 fc">
								<image class="img" :src="cdn('通知.svg')"></image>
								<view class="f30cf ml5">实时政策通知</view>
							</view>
							<view @click="navigateToPolicyLibrary" class="library fc">
								<image class="img" :src="cdn('政策库.svg')"></image>
								<view class="f30cf ml5">政策库</view>
							</view>
						</view>
					</view>
					<view class="matching fcsb p30">
						<image class="bgimg" :src="cdn('匹配.jpg')"></image>
						<view class="f30bc253867">政策匹配</view>
						<image @click="navigateInquire" class="img" src="/static/images/home/箭头.svg"></image>
					</view>
				</view>
			</view>
			<view class="p0030 w100  mb60">
				<view class="attention">
					<view class="fcsb mb45">
						<view class="tilte fcc">
							<view class="f36bc0">值得关注</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view @click="navigateActivity" class="fc">
							<view class="f24c6">更多</view>
							<image class="Frame ml5" src="/static/images/home/Frame(2).svg"></image>
						</view>
					</view>
					<view class="scroll-container">
						<view class="scroll-content">
							<view class="item mr20" v-for="(item,index) in homeData.activityData" :key="index"
								@click="handleapply(item.activity_id)">
								<image class="img mb20" :src="item.activity_cover"></image>
								<view class="f26bc0 mb8">{{item.activity_title}}</view>
								<view class="f20c9">{{item.create_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="p0030 w100  mb60">
				<view class="supply">
					<view class="fcsb mb37">
						<view class="tilte fcc">
							<view class="f36bc0">供需大厅</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view class="fc" @click="navigateTosupply">
							<view class="f24c6">更多</view>
							<image class="Frame ml5" src="/static/images/home/Frame(2).svg"></image>
						</view>
					</view>
					<view>
						<view class="fc mb28">
							<view class="f24bc9" :class="SwitchingType == 0 ? 'f24bc0' :''"
								@click="SwitchingRequirements(0)">推荐</view>
							<view class="f24bc9 ml67" :class="SwitchingType == 1 ? 'f24bc0' :''"
								@click="SwitchingRequirements(1)">供应</view>
							<view class="f24bc9 ml67" :class="SwitchingType == 2 ? 'f24bc0' :''"
								@click="SwitchingRequirements(2)">需求</view>
						</view>
						<view class="supplyList frw" style="gap: 22rpx;">
							<view class="item" v-for="(item,index) in homeData.supplyDemandData" :key="index"
								@click="handleSupplydetails(item)">
								<image class="img" :src="item.image"></image>
								<view class="contentBox fcols">
									<view>
										<view class="fc">
											<image v-if="item.supply_demand == 19" class="gong"
												src="/static/images/home/Frame.svg">
											</image>
											<image class="gong" v-else src="/static/images/home/xu.svg">
											</image>
											<view class="f26bc0">{{item.product_name}}</view>
										</view>
										<view class="f22c9">{{item.product_subtitle}}</view>
									</view>
									<view class="btn f20bcf fcc">
										<view>我要对接</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="p0030 w100  mb60">
				<view class="invite">
					<view class="fcsb mb45">
						<view class="tilte fcc">
							<view class="f36bc0">人力招聘</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view class="fc" @click="navigateTotalents">
							<view class="f24c6">更多</view>
							<image class="Frame ml5" src="/static/images/home/Frame(2).svg"></image>
						</view>
					</view>
					<view>
						<view class="item p30" v-for="(item,index) in  homeData.recruitmentData" :key="index"
							@click="handleTalentsdetails(item)">
							<view class="fcsb mb18">
								<view class="f36bc0">{{item.position_name}}</view>
								<view class="f36bcFF0C10">{{item.salary_range_text}}</view>
							</view>
							<view class="f225c0 mb18">{{item.enterprise_id_text}}·{{item.enterprise_size_text}}人
							</view>
							<view class="fc mb30">
								<view class="condition mr10 p0020">
									<view>{{item.province_id_text}}</view>
								</view>
								<view class="condition mr10 p0020">
									<view>{{item.work_experience_text}}</view>
								</view>
								<view class="condition mr10 p0020">
									<view>{{item.education_requirement_text}}</view>
								</view>
							</view>
							<up-line></up-line>
							<view class="f22c9 mt30">{{item.release_date}}发布</view>
						</view>
					</view>
				</view>
			</view>
			<view class="p0030 w100  mb60">
				<view class="plant">
					<view class="fcsb mb45">
						<view class="tilte fcc">
							<view class="f36bc0">找厂房</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view class="fc" @click="navigateToplant">
							<view class="f24c6">更多</view>
							<image class="Frame ml5" src="/static/images/home/Frame(2).svg"></image>
						</view>
					</view>
					<view>
						<view class="item mb20" v-for="(item,index) in  homeData.spaceData" :key="index"
							@click="handledeToplantdtails(item)">
							<view class="bg">
								<image class="plantbg" :src='item.space_image'></image>
								<view class="top fcc">
									<image class="rentout" :src="cdn('仅出租.svg')"></image>
									<view v-if="item.rent_nature == 18" class="text f22bc99A2E">
										仅出租
									</view>
									<view v-else class="text f22bc99A2E">
										仅出售
									</view>
								</view>
							</view>
							<view class="btm p30">
								<view class="f36bc0 mb18">{{item.space_title}}</view>
								<view class="flex mb30">
									<view class="f245c9 fc ">
										<view>租价:</view>
										<view class="FF0C10">{{item.rent_price}}</view>
									</view>
									<view class="f245c9 fc ml30">
										<view>建筑面积：</view>
										<view class="c398DFB">{{item.building_area}}</view>
									</view>
								</view>
								<up-line></up-line>
								<view class="fcsb mt18">
									<view class="f245c9">{{item.address}}</view>
									<view class="btn f20bcf fcc">预约考察</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<custom-tabbar />
		<up-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="serve">
				<view class="fcsb fc tilte p0030">
					<image class="tilteServe" src='/static/images/home/serve.svg'></image>
					<image @click="close" class="wh30" src='/static/images/home/×.svg'></image>
				</view>
				<view class="p30">
					<u-grid :col="2" :border="false">
						<u-grid-item v-for="(item, index) in jumpConfigData" :key="index">
							<view class="service-item fc" @click="handleJump(item)">
								<image :src="item.icon" mode="aspectFit" class="service-icon"></image>
								<text class="service-name">{{ item.title }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		computed,
		getCurrentInstance,
		onBeforeUnmount
	} from 'vue';
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		getIndex,
		getJumpConfig
	} from '@/api/login'
	import CustomTabbar from '@/components/custom-tabbar.vue'
	import CustomNavbar from '@/components/custom-navbar.vue'
	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	import {
		useI18n
	} from 'vue-i18n'

	// 正确获取实例
	const {
		t,
		locale
	} = useI18n()


	const isScrolled = ref(false);

	onPageScroll((e) => {
		isScrolled.value = e.scrollTop > 10;
	});
	const loading = ref(false)


	const homeData = ref({})
	const SwitchingType = ref(0)
	const loadIndex = async (val = 0) => {
		const res = await getIndex()
		if (res.code == 200) {
			homeData.value = res.data
			if (val == 0) {
				homeData.value.supplyDemandData = res.data.supplyDemandData.recommend

			} else if (val == 1) {
				homeData.value.supplyDemandData = res.data.supplyDemandData.supply

			} else if (val == 2) {
				homeData.value.supplyDemandData = res.data.supplyDemandData.demand
			}

		}
	}
	loadIndex()
	// 切换需求大厅
	const SwitchingRequirements = (val) => {
		SwitchingType.value = val
		loadIndex(SwitchingType.value)
	}
	const showSelect = ref('')
	const langList = ref([{
			id: 'zh-Hans',
			name: '中文简体'
		},
		{
			id: 'en',
			name: 'English'
		},
		{
			id: 'ja',
			name: '日本語'
		},
		{
			id: 'ko',
			name: '한국어'
		}
	])
	const changeLanguage = (e) => {
		const lang = e.id
		locale.value = lang
		uni.setStorageSync('lang', lang) // 持久化存储
		// console.log(e);
	}
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	const handleBack = () => {
		console.log('返回按钮点击');
	};

	const doSearch = () => {
		uni.showToast({
			title: `搜索: ${searchKey.value}`,
			icon: 'none'
		});
	};

	const editProfile = () => {
		uni.navigateTo({
			url: '/pages/user/edit'
		});
	};

	// 响应式数据  
	const cateId = ref('')
	const cateList = ref([{
			label: '中文简体',
			value: 'zh-CN'
		},
		{
			label: 'English',
			value: 'en-US'
		},
		{
			label: '日本語',
			value: 'ja-JP'
		},
		{
			label: '한국어',
			value: 'ko-KR'
		}
	])
	// 方法  
	const selectItem = (item) => {
		// cateId.value = item.name
		console.log(cateId.value);
	};
	const bgStyle = ref({})
	// 当前显示的索引
	const currentIndex = ref(0)
	// 定时器
	let scrollTimer = null
	// 自动滚动函数
	const startAutoScroll = () => {
		// 先清除已有定时器
		stopAutoScroll()

		// 设置定时器，每3秒滚动一次
		scrollTimer = setInterval(() => {
			if (homeData.value.policyData && homeData.value.policyData.length > 0) {
				currentIndex.value = (currentIndex.value + 1) % homeData.value.policyData.length
			}

		}, 5000) // 3秒切换一次
	}

	// 停止自动滚动
	const stopAutoScroll = () => {
		if (scrollTimer) {
			clearInterval(scrollTimer)
			scrollTimer = null
		}
	}

	const handleNavbarScroll = (scrollTop) => {
		console.log('当前滚动距离：', scrollTop);
		// 可在此处扩展其他逻辑，如根据滚动距离修改标题颜色
	};

	// 组件卸载前清除定时器
	onBeforeUnmount(() => {
		stopAutoScroll()
	})

	onMounted(() => {
		bgStyle.value = {
			backgroundImage: `url(https://gx.jifgou.com/image/homebg.png)`,
			backgroundSize: '100% auto',
			backgroundRepeat: 'no-repeat',
			minHeight: '100vh'
		}
		fetchJumpConfig();
		startAutoScroll()
	})

	// 计算当前显示的policy
	const currentPolicy = computed(() => {
		return homeData.value.policyData?.[currentIndex.value]
	})

	// 跳转到当前显示的policy详情
	const navigateToCurrentPolicy = () => {
		if (!currentPolicy.value) return

		uni.navigateTo({
			url: `/pages/Industry/details?policy_id=${currentPolicy.value.policy_id}`
		})
	}

	// 跳转到供需大厅
	const navigateTosupply = () => {
		uni.navigateTo({
			url: '/pages/supply/supply'
		});
	};
	const handleSupplydetails = (val) => {
		uni.navigateTo({
			url: `/pages/supply/details?sd_id=${val.sd_id}`
		});
	};
	//跳转到直播
	const navigateTolive = () => {
		uni.navigateTo({
			url: '/pages/live/live'
		});
	}
	// 跳转到园区引导
	const navigateTogarden = () => {
		uni.navigateTo({
			url: '/pages/garden/garden'
		});
	}
	// 六个扇叶的配置
	const sectors = ref([{
			route: '/pages/policy/notice',
			// color: 'rgba(75, 192, 192, 0.3)'
		}, // 青绿色
		{
			route: '/pages/plant/index',
			// color: 'rgba(54, 162, 235, 0.3)'
		}, // 蓝色
		{
			route: '/pages/activity/index',
			// color: 'rgba(255, 206, 86, 0.3)'
		}, // 黄色
		{
			route: '/pages/supply/supply',
			// color: 'rgba(153, 102, 255, 0.3)'
		}, // 紫色
		{
			route: '/pages/talents/index',
			// color: 'rgba(255, 159, 64, 0.3)'
		}, // 橙色
		{
			route: '/pages/financing/index',
			// color: 'rgba(255, 99, 71, 0.3)'
		}, // 番茄红
	]);
	// 中心区域点击
	const goToCenter = () => {
		uni.navigateTo({
			url: '/pages/park/index'
		});
	};

	// 扇叶区域点击
	const goToSector = (index) => {

		uni.navigateTo({
			url: sectors.value[index].route
		});
	};

	// 计算扇叶样式
	const getSectorStyle = (index) => {
		const sectorCount = sectors.value.length;
		const angle = 360 / sectorCount;
		const startAngle = angle * index - 30;
		const endAngle = startAngle + angle;

		// 计算扇形的 clip-path 路径
		const clipPath = `
    polygon(
      50% 50%,
      ${50 + 50 * Math.cos((startAngle - 90) * Math.PI / 180)}% ${50 + 50 * Math.sin((startAngle - 90) * Math.PI / 180)}%,
      ${50 + 50 * Math.cos((endAngle - 90) * Math.PI / 180)}% ${50 + 50 * Math.sin((endAngle - 90) * Math.PI / 180)}%
    )
  `;

		return {
			width: '100%',
			height: '100%',
			position: 'absolute',
			left: '0',
			top: '0',
			clipPath: clipPath,
			backgroundColor: sectors.value[index].color,
			pointerEvents: 'auto',
			zIndex: 2,
		};
	};
	// 服务入口
	// 创建响应式数据  
	const show = ref(false);

	// 定义方法  
	const open = () => {
		// 打开逻辑，比如设置 show 为 true  
		show.value = true;
		// console.log('open');  
	}

	const close = () => {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
		// console.log('close');  
	}

	const serveList = ref([{
			img: '/static/images/home/审批局.svg',
			name: '审批局',
			background: 'linear-gradient(21deg, #EEF2FE 0%, #DCE8FF 100%)',

		},
		{
			img: '/static/images/home/静心办.svg',
			name: '静心办',
			background: 'linear-gradient(21deg, #E9F6FF 0%, #DEEEFE 100%)',

		},
		{
			img: '/static/images/home/税务.svg',
			name: '税务',
			background: 'linear-gradient(21deg, #FFF3DB 0%, #FEEDCF 100%)',

		},
		{
			img: '/static/images/home/工商.svg',
			name: '工商',
			background: 'linear-gradient(21deg, #EEF5ED 0%, #E8F4E8 100%)',

		}
	])
	// 服务入口数据
	const jumpConfigData = ref([]);

	// 获取服务入口配置
	const fetchJumpConfig = async () => {
		try {
			const res = await getJumpConfig('zh', 1, 10);
			if (res.code === 200) {
				jumpConfigData.value = res.data.data;
			}
		} catch (error) {
			console.error('获取服务入口配置失败:', error);
		}
	};
	// 处理服务入口跳转
	const handleJump = (item) => {
		// 添加随机参数避免缓存问题
		const dynamicPath = `${item.path}?t=${Date.now()}`;

		uni.navigateToMiniProgram({
			appId: item.appid,
			path: dynamicPath,
			success: () => {
				console.log('跳转成功');
			},
			fail: (err) => {
				console.error('跳转失败:', err);
				// 备用方案
				fallbackJump(item);
			}
		});
	};

	const fallbackJump = (item) => {
		// 尝试用其他方式打开
		if (item.appid === 'wx9fe341bd9c4aff38') {
			// 静心办特殊处理
			uni.setClipboardData({
				data: '静心办',
				success: () => {
					uni.showModal({
						title: '提示',
						content: '已复制小程序名称，请到微信搜索打开',
						showCancel: false
					});
				}
			});
		} else {
			// 其他小程序常规处理
			uni.showToast({
				title: '跳转失败，请稍后再试',
				icon: 'none'
			});
		}
	};

	// 路径格式化函数
	const formatPath = (path) => {
		if (!path) return '';
		return path.startsWith('/') ? path : `/${path}`;
	};

	//跳转产业资讯
	const navigateToIndustry = () => {
		uni.navigateTo({
			url: '/pages/Industry/index'
		});
	}

	//跳转到实时政策
	const navigateToPolicyNotice = () => {
		uni.navigateTo({
			url: '/pages/policy/notice'
		});
	}
	// 跳转政策库
	const navigateToPolicyLibrary = () => {
		uni.navigateTo({
			url: '/pages/policy/library'
		});
	}
	// 跳转到政策匹配
	const navigateInquire = () => {
		uni.navigateTo({
			url: '/pages/policy/inquire'
		});
	}
	// 跳转园区展示 
	const navigateTopark = () => {
		uni.navigateTo({
			url: '/pages/park/index'
		});
	}

	// 值得关注 
	const navigateActivity = () => {
		uni.navigateTo({
			url: '/pages/activity/index'
		});
	}
	// 值得关注 详情
	const handleapply = (activity_id) => {
		uni.navigateTo({
			url: `/pages/activity/apply?id=${activity_id}` // 假设item对象中有id字段
		});
	};
	// 人力招聘

	const navigateTotalents = () => {
		uni.navigateTo({
			url: `/pages/talents/index`
		});
	}
	// 找厂房
	const navigateToplant = () => {
		uni.navigateTo({
			url: '/pages/plant/index'
		});
	}
	const handleTalentsdetails = (item) => {
		uni.navigateTo({
			url: `/pages/talents/position?recruitment_id=${item.recruitment_id}`
		});
	};
	// ai客服
	const handleService = () => {
		uni.navigateTo({
			url: '/pages/service/index'
		});
	}
	// 找厂房详情
	const handledeToplantdtails = (item) => {
		uni.navigateTo({
			url: `/pages/plant/details?space_id=${item.space_id}`
		})
	}
</script>

<style lang="scss" scoped>
	.home {
		// background-image: url('/static/images/home/homebg.png');
		width: 100%;
		min-height: 100vh;
		position: relative;

		.custom-navbar {
			.search {
				width: 150rpx;
				height: 60rpx;
			}
		}

		.serve {
			.tilte {
				width: 100%;
				height: 110rpx;
				background: #E9F6FF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				position: relative;

				.tilteServe {
					width: 136rpx;
					height: 45.37rpx;
				}
			}

			.service-item {
				height: 130rpx;
				width: 334rpx;
				margin: 10rpx;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				background: linear-gradient(21deg, #EEF2FE 0%, #DCE8FF 100%);
			}

			.service-icon {
				width: 60rpx;
				height: 60rpx;
			}

			.service-name {
				margin-left: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 44px);
			/* 导航栏高度 */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.p30 {
				padding: 30rpx;
				box-sizing: border-box;
			}

			.smart-cn {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.hi-smart {
					width: 560rpx;
					height: 110rpx;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 20rpx 20rpx 20rpx 50rpx;
					border: 2rpx solid #ffffff;
					// border-image: linear-gradient(61deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 2 2;
					box-sizing: border-box;
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.img {
						width: 130.14rpx;
						height: 159rpx;
						position: absolute;
						top: -50rpx;
						left: 0rpx;
					}

					.right {
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
						margin-left: 138rpx;

						.hi-smart-left {

							.top {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #000000;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-bottom: 10rpx;
							}

							.bottom {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #999999;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

						}

						.hi-smart-right {
							.arrows {
								width: 50rpx;
								height: 50rpx;
							}
						}
					}

				}


			}

			.languageSwitch {
				width: 100rpx;
				height: 110rpx;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.Parkdisplay-container {
				width: 100%;
				height: 722rpx;
				position: relative;
				border-radius: 50%;
				overflow: visible;
				/* 修改为visible */

				.center-area {
					position: absolute;
					width: 100px;
					height: 100px;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.3);
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 10;
					/* 提高层级 */
					pointer-events: auto;
				}

				.sector {
					z-index: 5;
					backface-visibility: hidden;
					/* 防止渲染问题 */
					pointer-events: auto;
				}

				.Parkdisplay-image {
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 1;
				}
			}

			.Industry {
				width: 100%;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.scroll-container {
					flex: 1;
					overflow: hidden;
					position: relative;
					height: 80rpx;
					/* 确保高度固定 */
				}

				.scroll-content {
					position: absolute;
					width: 100%;
					top: 0;
					left: 0;
					transition: transform 0.5s ease;
				}

				.scroll-item {
					width: 80%;
					height: 80rpx;
					line-height: 80rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.img {
					width: 104rpx;
					height: 33px;
				}

				.arrows {
					width: 19.76rpx;
					height: 17.51rpx;
				}

				.division {
					width: 1rpx;
					height: 30rpx;
					background: #E5E5E5;
					margin: 0 20rpx;
				}
			}

			.entrance {

				.item {
					width: 216rpx;
					height: 170rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1rpx solid;
					border-image: linear-gradient(61deg, rgba(57, 141, 251, 0), rgba(255, 255, 255, 1)) 1 1;
					padding: 25rpx 23rpx 0 25rpx;
					box-sizing: border-box;

					.live {
						width: 81rpx;
						height: 72rpx;
					}

					.Park {
						width: 70rpx;
						height: 83rpx;
					}

					.Service {
						width: 67rpx;
						height: 83rpx;
					}
				}
			}

			.Preferential {

				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: -8rpx;
					}
				}

				.Frame {
					width: 20rpx;
					height: 20rpx;

				}

				.Industry {
					width: 340rpx;
					height: 240rpx;
					background: linear-gradient(225deg, #2D84FF 0%, #649EFD 100%);
					box-shadow: inset 0rpx 4rpx 30rpx 0rpx #98C0FF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding: 25rpx 30rpx;
					box-sizing: border-box;
					// position: relative;

					.zixun {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						top: -10rpx;
						left: -10rpx;
					}
				}

				.inform {
					width: 330rpx;
					height: 110rpx;
					background: linear-gradient(225deg, #40A4FF 0%, #1AC8EF 100%);
					box-shadow: inset 0rpx 4rpx 30rpx 0rpx #98C0FF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding: 15rpx 13rpx;
					box-sizing: border-box;

					.img {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.library {
					width: 330rpx;
					height: 110rpx;
					background: linear-gradient(225deg, #8D9EF8 0%, #607EFC 100%);
					box-shadow: inset 0rpx 4rpx 30rpx 0rpx #98C0FF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding: 15rpx 13rpx;
					box-sizing: border-box;

					.img {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.matching {
					position: relative;

					.bgimg {
						position: absolute;
						width: 100%;
						height: 110rpx;
						left: -0rpx;
						top: -0rpx;
						z-index: -1;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					.img {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.attention {
				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: -8rpx;
					}
				}

				.Frame {
					width: 20rpx;
					height: 20rpx;

				}

				.scroll-container {
					width: 100%;
					overflow-x: auto;
					-webkit-overflow-scrolling: touch;

					/* 在iOS上更流畅的滚动 */
					.scroll-content {
						display: flex;
						flex-direction: row;
						width: max-content;

						/* 内容宽度自适应 */
						.item {
							.img {
								width: 320rpx;
								height: 240rpx;
							}
						}
					}
				}



			}

			.supply {
				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: -8rpx;
					}
				}

				.Frame {
					width: 20rpx;
					height: 20rpx;

				}

				.supplyList {
					.item {
						width: 334rpx;

						.img {
							width: 334rpx;
							height: 300rpx;
						}

						.contentBox {
							width: 334rpx;
							height: 180rpx;
							background: #FFFFFF;
							border-radius: 0rpx 0rpx 20rpx 20rpx;
							padding: 24rpx 20rpx;
							box-sizing: border-box;

							.gong {
								width: 30rpx;
								height: 30rpx;
							}

							.btn {
								width: 100%;
								height: 50rpx;
								background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
								border-radius: 10rpx 10rpx 10rpx 10rpx;
							}
						}
					}
				}
			}

			.invite {
				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: -8rpx;
					}
				}

				.Frame {
					width: 20rpx;
					height: 20rpx;

				}

				.item {
					width: 100%;
					height: 300rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1rpx solid;
					border-image: linear-gradient(61deg, rgba(57, 141, 251, 0), rgba(255, 255, 255, 1)) 1 1;
					margin-bottom: 20rpx;

					.condition {
						// width: 90rpx;
						height: 44rpx;
						background: rgba(146, 146, 146, 0.1);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #A1A1A1;
						line-height: 44rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.plant {
				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: -8rpx;
					}
				}

				.Frame {
					width: 20rpx;
					height: 20rpx;

				}

				.item {

					.bg {
						width: 100%;
						height: 320rpx;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						position: relative;

						.plantbg {
							border-radius: 20rpx 20rpx 0rpx 0rpx;
							position: absolute;
							width: 100%;
							height: 100%;
						}

						.top {
							position: absolute;
							right: 30rpx;
							width: 100rpx;

							.rentout {
								width: 100rpx;
								height: 94rpx;
							}

							.text {
								position: absolute;
								top: 44rpx;
							}
						}

					}

					.btm {
						width: 100%;
						height: 246rpx;
						background: #FFFFFF;
						border-radius: 0rpx 0rpx 20rpx 20rpx;

						.btn {
							width: 150rpx;
							height: 60rpx;
							background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
							border-radius: 10rpx 10rpx 10rpx 10rpx;
						}
					}
				}
			}

		}
	}
</style>